<template>
  <div>
    <MainContent title="导出文件列表">
      <SearchBar inline>
        <template #normal>
          <el-form-item label="文件名称">
            <el-input v-model="tableForm.name" clearable placeholder="请输入文件名称"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="tableForm.status" placeholder="请选择状态" clearable>
              <el-option :label="item.name" :value="item.id" :key="item.id" v-for="item in statusList" />
            </el-select>
          </el-form-item>
          <el-form-item label="时间">
            <el-date-picker v-model="time" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
              :default-time="defaultTime" />
          </el-form-item>

        </template>
        <template #toolbar>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>

          </el-form-item>
        </template>
      </SearchBar>

      <LayoutTable ref="tableFormRef" url="/merchant/Export/Page" :param="tableForm">
        <el-table-column prop="name" label="文件名称" min-width="130" show-overflow-tooltip></el-table-column>
        <el-table-column prop="counting" label="数据量" min-width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="状态" min-width="80" show-overflow-tooltip>
          <template #default="scope">
            <div>
              <el-tag type="success" v-if="scope.row.status">导出完成</el-tag>
              <el-tag type="warning" v-else>正在导出</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="130" show-overflow-tooltip>
          <template #default="scope">
            <!-- <div v-if="scope.row.status">
            </div> -->
            {{ dateFormat(scope.row.createTime) }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="数据筛选时间"
          min-width="200"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div v-if="scope.row.status && scope.row.startTime">
              {{ `${dateFormat(scope.row.startTime)}-${dateFormat(scope.row.endTime)}`  }}
            </div>
            <div v-else>暂无</div>
          </template>
        </el-table-column> -->

        <el-table-column label="操作" width="120" fixed="right" align="center">
          <template #default="scope">
            <div v-if="scope.row.status">
              <el-button link type="primary" @click="downLoad(scope.row)" v-if="scope.row.url"> 下载 </el-button>
            </div>
          </template>
        </el-table-column>
      </LayoutTable>
    </MainContent>
  </div>
</template>
<script lang="ts" setup>
import { dateFormat } from "@/utils/filters";
const Store = useStore();
const tableFormRef = ref();
const time = ref("")
const defaultTime = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
] as any; // '12:00:00', '08:00:00'
const tableForm = ref({
  name: "",
  status: "",
  startTime: "" as any,
  endTime: "" as any,
});
const statusList = ref([
  { name: "导出完成", id: 1 },
  { name: "正在导出", id: 0 },
])


watch(
  () => time,
  (val) => {
    if (val) {
      tableForm.value.startTime = new Date(val[0]).getTime();
      tableForm.value.endTime = new Date(val[1]).getTime();
    } else {
      tableForm.value.startTime = "";
      tableForm.value.endTime = "";
    }
  },
  {
    deep: true,
  }
);

const insId = computed(() => {
  return Store.state.insId.insId;
});
watch(
  () => insId,
  async () => {
    onSearch();
  },
  {
    deep: true,
  }
);
const downLoad = (row: any) => {
  window.location.href = row.url
}
const onSearch = () => {
  tableFormRef.value.search();
};
</script>

<style lang="scss" scoped></style>
